<template>
    <div class="input-content" >
        <div class="input-label"><span v-if="props.required" style="color:red;">*</span>{{caption}}</div>
        <div class="input-el-content">
            <el-radio-group v-model="radio1" class="ml-4">
                <el-radio label="1" size="large">Option 1</el-radio>
                <el-radio label="2" size="large">Option 2</el-radio>
            </el-radio-group>
        </div>
    </div>
  </template>
  
  <script setup>
    import { defineProps, defineExpose, defineEmits, ref} from "vue";
  
    const props = defineProps({
        name: {
            type: String,
            require: true
        },
        caption: {
            type: String
        },
        placeholder: {
            type: String
        },
        size: {
            type: String,
            default: 'mini',
            validator: (value) => {
            // 这个值必须匹配下列字符串中的一个
            return ['medium', 'small', 'mini'].indexOf(value) !== -1
            }
        },
    });
    const emits = defineEmits(['onChange']);
    
    const inputValue = ref('');
    let valueChange = function(){
        emits('onChange', inputValue.value);
    }
  
    defineExpose({
        
    });
  
  
  
  </script>
  
  <style scoped>
    .input-label{
        display: inline-block;
        height: 32px;
        line-height: 32px;
        min-width: 80px;
        width: 25%;
    }
    .input-el-content{
        display: inline-block;
        height: 32px;
        width: 75%;
    }
    .custom-el-input{
        background: #F2F3F5;
        border-radius: 2px;
    }
  </style>